<template>
  <div
    role="alert"
    :class="cn(alertVariants({ visual, type, direction }), { hidden: closed })"
  >
    <slot name="icon">
      <svg
        v-if="icon"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        class="h-6 w-6 shrink-0 stroke-current"
      >
        <path
          v-if="icon == 'info'"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        ></path>
        <path
          v-else-if="icon == 'success'"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
        />
        <path
          v-else-if="icon == 'warning'"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
        />
        <path
          v-else-if="icon == 'error'"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
    </slot>
    <slot>
      <div class="w-full" v-if="title">
        <div class="flex justify-between items-center">
          <h3 class="font-bold">{{ title }}</h3>
          <button class="btn btn-circle size-4" @click="close">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="size-4"
              viewBox="0 0 24 24"
              @click="close"
            >
              <g
                fill="none"
                stroke="currentColor"
                stroke-dasharray="16"
                stroke-dashoffset="16"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
              >
                <path d="M7 7l10 10" stroke-dashoffset="0" />
                <path d="M17 7l-10 10" stroke-dashoffset="0" />
              </g>
            </svg>
          </button>
        </div>
        <p class="text-xs">{{ message }}</p>
      </div>
      <span v-else>{{ message }}</span>
    </slot>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { cva } from "class-variance-authority";
import { cn } from "../utils";
import type { AlertVisual, AlertType, AlertDirection } from "./types";
import { computed } from "vue";

interface Props {
  visual?: AlertVisual;
  type?: AlertType;
  iconType?: AlertType;
  direction?: AlertDirection;
  title?: string;
  message?: string;
  duration?: number;
  name?: string;
}

const props = defineProps<Props>();
const modelValue = defineModel<boolean>();
const emit = defineEmits<{
  close: [name?: string];
}>();

const alertVariants = cva("alert", {
  variants: {
    visual: {
      outline: "alert-outline",
      dash: "alert-dash",
      soft: "alert-soft",
    },
    type: {
      success: "alert-success",
      info: "alert-info",
      warning: "alert-warning",
      error: "alert-error",
    },
    direction: {
      horizontal: "alert-horizontal",
      vertical: "alert-vertical",
      responsive: "alert-vertical sm:alert-horizontal",
    },
  },
});
const icon = computed(() => {
  return props.iconType ?? props.type;
});
// close
const closed = ref(false);
watch(modelValue, (val) => {
  closed.value = !val;
  if (val && props.duration) {
    setTimeout(close, props.duration);
  }
});
function close() {
  modelValue.value = false;
  closed.value = true;
  emit("close", props.name);
}
// duration
props.duration && setTimeout(close, props.duration);
</script>
